<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
  <div class="dashboard-container" id="category-app" align="center">
    <h1>查询某日天气</h1><hr>

    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
              slot="dateCell"
              slot-scope="{date, data}"
              >
        <div @click="showWeather(date)">
          <p :class="data.isSelected ? 'is-selected' : ''" >
            {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
          </p>
        </div>
      </template>
    </el-calendar>
  </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/category.js"></script>
    <script src="../../api/weather.js"></script>
    <script src="../../api/date.js"></script>
    <script>
      new Vue({
        el: '#category-app',
        data() {
          return {
            weather:{},
          }
        },
        computed: {},
        created() {
          //this.init()
        },
        mounted() {
        },
        methods: {

          // 展示温度
          showWeather(data){
            let date = dateToString(data)
            getOneDay(date).then(res=>{
                this.weather = res.data
              this.$notify({
                title: "查询成功:"+this.weather.date,
                message: "最高气温："+this.weather.highestTemperature
                +"；最低气温："+this.weather.lowestTemperature
                +"；平均气温："+this.weather.averageTemperature
                +"；降水情况："+this.weather.precipitation,
                type: 'success',
              });
            })
          },
        }
      })
    </script>
</body>
</html>
<style>
  .is-selected {
    color: #1989FA;
  }
</style>